<%@page import="helpers.LanguageHelper"%>
<%@page import="helpers.UrlHelper"%>
<%@page import="helpers.StringHelper"%>
<%@page import="entities.User"%>
<%@page import="java.util.TreeMap"%>
<%@page import="entities.Article"%>
<%@page import="entities.Category"%>
<%@page import="java.util.List"%>
<%
TreeMap check = (TreeMap) request.getAttribute("check");
Article article = (Article) request.getAttribute("article");
List<Category> categories = (List<Category>) request.getAttribute("categories");
String success = (String)request.getAttribute("success");
User user = (User) request.getAttribute("user_logged_in");
String url = (String) request.getAttribute("url");
LanguageHelper translate = (LanguageHelper) request.getAttribute("translate");
%>

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<jsp:include page="/user/layouts/header.jsp" />
<script type="text/javascript">
jQuery(document).ready(function () {
	jQuery("#profileTab li:eq(3)").addClass("active");
});
</script>
            <ul class="nav nav-tabs">
                <li>
                    <a href="/profile"><i class="icon-tasks"></i> Profile</a>
                </li>
                <li>
                    <a href="/profile/change-avatar"><i class="icon-user"></i> Change Avatar</a>
                </li>
                <li>
                    <a href="/profile/article/list"><i class="icon-briefcase"></i> My Articles</a>
                </li>
                <li class="active">
                    <a href="/profile/article/submit"><i class="icon-envelope"></i> Submit Article</a>
                </li>
            </ul>
            <div class="tab-content">
            	<div id="submit-tab" class="tab-pane row-fluid active fade in">
                	<% if (success != null) { %>
		           <div class="alert alert-success"><%=success %></div>
		           <% } %>
                	       
                    <form method="post" action="" class="form-horizontal">
                        
                        <div class="row-fluid control-group">
                            <div class="span6 control-group <%=check.get("title") != null ? "error" : ""%>">
                                <label><i class="icon-pencil"></i> Article Title  (required)</label>
                                <input type="text" id="inputTitle" name="title" placeholder="Title" class="input-block-level" value="<%=article.getTitle() %>" >
							<% if (check.get("title") != null) { %>
                          <span class="help-inline"><%=check.get("title") %></span>
                          <% } %>
                            </div>
                            <div class="span4 control-group <%=check.get("category") != null ? "error" : ""%>">
                                <label><i class="icon-folder-open"></i> Category</label>
                                <select name="category" class="input-block-level">
                                    <% for (Category category : categories) { %>                                
                              <option value="<%=category.getId()%>" <%=category.getId().equalsIgnoreCase(article.getCategory()) ? "selected=\"selected\"" : "" %>><%=category.getName() %></option>
                              <% } %>
                                </select>
                                <% if (check.get("category") != null) { %>
                          <span class="help-inline"><%=check.get("category") %></span>
                          <% } %>
                            </div>
                        </div>
                        
                        <div class="control-group <%=check.get("content") != null ? "error" : ""%>">
                            <label><i class="icon-retweet"></i> Content (required)</label>
                            <textarea class="input-block-level" rows="10" name="content" placeholder="Content article"><%=article.getContent()%></textarea>
                         <% if (check.get("content") != null) { %>
                         <span class="help-inline"><%=check.get("content") %></span>
                         <% } else { %>
                         <span class="text-warning"><em>Minimum 500 charracter</em></span>
                         <% } %>
                        </div>
                        
                        <div class="control-group <%=check.get("keywords") != null ? "error" : ""%>">
                            <label><i class="icon-tags"></i> Keyword</label>
                            <input type="text" id="inputKeywords" name="keywords" placeholder="Keywords" class="input-block-level" value="<%=StringHelper.listToString(article.getKeywords(), ", ")%>" >
                            <% if (check.get("keywords") != null) { %>
                         <span class="help-inline"><%=check.get("keywords") %></span>
                         <% } else { %>
                         <span class="text-warning"><em>Example : keyword1, keyword2, ...</em></span>
                         <% } %>
                        </div>
                        
                        
                        <button type="submit" class="btn btn-primary">Submit</button>
                    </form>
                </div>
            </div>
                    
                    
<jsp:include page="/user/layouts/footer.jsp" />